<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<title>大猴子-程序猿</title>
<div th:include="tmp/css :: css_web_noscr"></div>
<link href="https://cdn.bootcss.com/simditor/2.3.6/styles/simditor.min.css" rel="stylesheet" />
</head>

<body>

	<div class="container">
		<div th:include="tmp/layout :: nav_admin"></div>
		<hr />
		<div class="left sticky-top">
			<div class="card">
				<ul class="list-group list-group-flush">
					<div class="card-header">编辑器</div>
					<li class="list-group-item"><a th:href="@{/Article4AdminCtrl/summernotEdit}">文章编辑(summernote)</a></li>
					<li class="list-group-item"><a th:href="@{/Article4AdminCtrl/simditorEdit}">文章编辑(simditor)</a></li>
					<button class="btn btn-md" id="getcode" onclick="getcode();">提交</button>
				</ul>
			</div>
		</div>
		<div class="row">
			<div class="col-12">
				<div class="row form-group">
					<div class="col">
						<div class="input-group">
							<span class="input-group-addon" id="basic-addon1">標題</span> <input id="title" type="text" class="form-control" value="默认标题">
						</div>
					</div>
					<div class="col">
						<div class="input-group">
							<span class="input-group-addon">分类</span> <select class="form-control" id="catalog">
								<option>记事</option>
								<option selected="selected">杂谈</option>
								<option>运维</option>
								<option>软件</option>
								<option>JAVA</option>
							</select>
						</div>
					</div>

					<div class="col">
						<div class="input-group">
							<span class="input-group-addon">作者</span> <input id="author" type="text" class="form-control" value="空空">
						</div>
					</div>
					<div class="col">
						<div class="input-group">
							<span class="input-group-addon"> <input type="checkbox" aria-label="Checkbox for following text input">
							</span><span class="input-group-addon" id="basic-addon1">原创</span>
						</div>
					</div>
				</div>
				<textarea id="simditor" placeholder="Balabala" autofocus></textarea>
				<!-- <div id="summernote"></div> -->
			</div>
		</div>
	</div>
	<div th:include="tmp/js :: js_web"></div>
	<script type=" text/javascript" th:src="@{/simditor/scripts/module.js}"></script>
	<script type="text/javascript" th:src="@{/simditor/scripts/hotkeys.js}"></script>
	<script type="text/javascript" th:src="@{/simditor/scripts/uploader.js}"></script>
	<script type="text/javascript" th:src="@{/simditor/scripts/simditor.js}"></script>

	<script th:src="@{/js/jqueryFormAlerts.js}" src="../../../static/js/jqueryFormAlerts.js"></script>
	<script th:inline="javascript">
	var editor = new Simditor({
  textarea: $('#simditor'),
toolbar: [
  'title','bold','italic','underline',
  'strikethrough',
  'fontScale',
  'color',
  'ol'    ,        
  'ul'  ,         
  'blockquote',
  'code'        , 
  'table',
  'link',
  'image',
  'hr'      ,     
  'indent',
  'outdent',
  'alignment'
]
});

console.log(editor.getValue());
		function getcode() {
			$.ajax({
				url : '/Article4AdminCtrl/articlePost',
				type : 'PUT',
				data : {
					catalog : $("#catalog").val(),
					title : $("#title").val(),
					author : $("#author").val(),
					article : editor.getValue(),
					[[${_csrf.parameterName}]]: [[${_csrf.token}]]
				},
				dataType : 'json',
				success : function(data) {
					if (data.code != 200) {
						$("#remark").text("登记失败，请确保输入正确或联系前台工作人员");
					} else {
						alert("seccess");

					}
				},
				error : function(e) {
					$("#remark").text("登记失败，请确保输入正确或联系前台工作人员");
				}
			});
		}
	</script>

</body>
</html>